<template>
  <div class="classic-container" v-if="classic">
    <div class="header">
      <classic-episode class="header-episode" :index="classic.index"/>
      <like :likeCount="likeCount" :likeStatus="likeStatus" class="header-like" @like="onLike"/>
    </div>
    <classic-movie :show="classic.type==100" :img="classic.image" :content="classic.content"/>
    <classic-music ref="music" v-if="classic.type==200" :img="classic.image" :src="src" :content="classic.content" @audioMusic="onPlay"/>
    <classic-essay :show="classic.type==300" :img="classic.image" :content="classic.content"/>
    <classic-navi class="navi" :title="classic.title" :first="first" :latest="latest" @left="onNext" @right="onPrev"/>
    <audio ref="audio"></audio>
  </div>
</template>

<script>
import Like from 'components/like/like'
import ClassicEpisode from 'components/classicEpisode/ClassicEpisode'
import ClassicNavi from 'components/classicNavi/ClassicNavi'
import ClassicMovie from 'components/classic/classicMovie/ClassicMovie'
import ClassicEssay from 'components/classic/classicEssay/ClassicEssay'
import ClassicMusic from 'components/classic/classicMusic/ClassicMusic'
import {ClassicModel} from '../../models/classic'
import {LikeModel} from '../../models/like'
import {Toast} from 'mint-ui'
const classicModel = new ClassicModel()
const likeModel = new LikeModel()
export default {
  name: 'Classic',
  components: {
    Like,
    ClassicEpisode,
    ClassicNavi,
    ClassicMovie,
    ClassicEssay,
    ClassicMusic
  },
  data () {
    return {
      classic: null,
      likeCount: null,
      likeStatus: false,
      src: '',
      first: false,
      latest: true
    }
  },
  methods: {
    $_getClassicInfo () {
      classicModel.getClassicLast()
        .then(res => {
          this.classic = res
          this.likeCount = res.fav_nums
          this.likeStatus = !!res.like_status
          if (res.type === 200) {
            this.src = res.url
          }
        })
    },
    onNext () {
      this.$_updataClassic('next')
    },
    onPrev () {
      this.$_updataClassic('previous')
    },
    $_updataClassic (nextOrPrev) {
      let index = this.classic.index
      classicModel.getClassic(index, nextOrPrev)
        .then(res => {
          this.classic = res
          if (res.type === 200) {
            this.src = res.url
          }
          this.$_getLikeStatus(res.id, res.type)
          this.first = classicModel.isFirst(res.index)
          this.latest = classicModel.isLatest(res.index)
        })
    },
    onPlay (playStatus) {
      if (playStatus) {
        this.$refs.audio.src = this.src
        this.$refs.audio.play()
      } else {
        this.$refs.audio.pause()
      }
    },
    onLike (behavior) {
      likeModel.like(behavior, this.classic.id, this.classic.type)
        .then(res => {
          let tip = behavior === 'like' ? '点赞成功' : '取消成功'
          if (res.msg === 'ok') {
            Toast({
              message: tip,
              duration: 1000
            })
            this.likeStatus = behavior === 'like'
          }
        })
    },
    $_getLikeStatus (artId, category) {
      likeModel.getClassicLikeStatus(artId, category)
        .then(res => {
          this.likeCount = res.fav_nums
          this.likeStatus = !!res.like_status
        })
    }
  },
  mounted () {
    this.$_getClassicInfo()
  }
}
</script>

<style lang="stylus" scoped>
  .classic-container
    display: flex
    flex-direction: column
    align-items: center
    width: 100%
    margin-top: 1.16rem
    .header
      display: flex
      flex-direction: row
      width: 100%
      height: 1rem
      align-items: center
      justify-content: space-between
      box-shadow: 0 0 1px 0 #e3e3e3
      .header-episode
        margin-left: .2rem
        margin-top: .04rem
      .header-like
        margin-top: .06rem
    .navi
      position: absolute
      bottom: 1.28rem
</style>
